import React, { Component } from 'react';
import { Block } from '_platform/components4max/Block';
import { BarChart } from '_platform/components4max/Charts/Bar';
import { Icon,notification } from 'antd';
const echarts = require('echarts');


export default class Chart2 extends Component {
    constructor() {
        super();
        this.state = {
            xdata : ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8'],
            seriesdata1: ['5', '3', '-5', '-5', '4', '-4', '6', '5'],
        }
    }
    componentWillMount(){
        let {xdata,seriesdata1} = this.state;
        let next = 9;
        setInterval(()=>{
            xdata.shift();
            xdata.push('项目'+(next++)%99);
            seriesdata1.shift();
            seriesdata1.push(Math.round(Math.random()*10)-5);
            this.setState({xdata,seriesdata1});
        },2100);
    }
    
    render() {
        return (
                <BarChart style={{ width: '100%', height: '100%' }}
                option = {{
                    color: ['#5793f3'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    grid: {
                        top: '25px',
                        bottom: '30px'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.state.xdata,
                            // data:project,
                            axisLabel: {
                                interval: 0,
                                rotate: 30,
                                color: '#fff'
                            },
                            axisLine: {
                                lineStyle: {
                                    //color: '#ffffff'
                                }
                            }
                            // axisTick:{
                            //    show:false
                            // }
        
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: "天数",
                            min: -10,
                            max: 10,
                            interval: 5,
                            position: 'left',
                            axisLabel: {
                                formatter: '{value}',
                                color: '#ffffff'
                            },
                            axisLine: {
                                show: false
                            },
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            data: this.state.seriesdata1,
                            // data:gettime,
                            //barGap: '10%',
                            barWidth: '35%',
                            itemStyle: {
                                normal: {
                                    color: '#4de4f8'
                                }
                            }
                        },
                    ]
                }}
                />
        )
    }
}
